<template>
	<view class="_cpimg">
		<canvas id="_myCanvas" canvas-id="_myCanvas"  />
	</view>
</template>

<script>
	let _rtArr = [],
		_cgFile = '',
		_index = 0;
		var sourceType = [
				['camera'],
				['album'],
				['camera', 'album']
			]
	export default {
		name: "cpimg",
		props: {
			maxWidth: {
				type: Number,
				default: 750
			},
			type: {
				type: String,
				default: 'url'
			},
			ql: {
				type: Number,
				default: 0.92
			},
			src: {
				type: String,
				default: ''
			},
			number: {
				type: Number,
				default: 1
			},
			fixOrientation: {
				type: Boolean,
				default: true
			},
			size: {
				type: Number,
				default: 500000
			},
		},
		data() {
			return {
				cWidth: 750,
				cHeight: 750,
				videosourceType: ['拍摄', '相册'],
				videosourceTypeIndex: 2,
			}
		},
		onUnload: function() {},

		methods: {
			// 选择照片
			_changVid() {

				var that = this
				uni.showActionSheet({
					title: '选择类型',
					itemList: this.videosourceType,
					success: e => {
						that.videosourceTypeIndex = e.tapIndex
						// 选择视频
						that.chooseVideo(that.videosourceTypeIndex)

					}
				});

				// let that = this;
				// if (that.src == '') {
				// 	uni.chooseVideo({
				// 		count: that.number, //默认9
				// 		sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有

				// 		success: function(res) {
				// 			_rtArr = [];
				// 			_cgFile = res.tempFilePaths;
				// 			_index = 0;
				// 			that._cpImg()
				// 		},
				// 		fail: function(e) {
				// 			that._err(e)

				// 		}
				// 	});
				// } else {
				// 	_cpImg(that.src)
				// }
			},
			chooseVideo: function(e) {
				let _this = this;
				let that = this;
				if (that.src == '') {
					uni.chooseVideo({
						sourceType: sourceType[e],
						maxDuration: 60,
						success: res => {
							uni.showLoading({
								title: '上传中',
								mask: true
							})
							var videoSrc = res.tempFilePath
							_rtArr = [];
							_cgFile = res.tempFilePath;
							
							_index = 0;
							that._result(_cgFile)
							// uni.hideLoading()
							// var uploadTask = uni.uploadFile({
							// 	url: "http://1.14.19.236:8034/sampleScreen/App/upload/uploadFile.do",
							// 	method: "POST",
							// 	header: {
							// 		'Authorization': 'bearer ' + uni.getStorageSync('token')
							// 	},
							// 	formData: {
							// 		folderid: _this.totalData.fSourcefile,
							// 		userId: _this.userInfo.userId, // 当前登录用户的 id
							// 		userName: _this.userInfo.realName,
							// 	},
							// 	filePath: videoSrc,
							// 	name: 'file',
							// 	success: (res) => {
							// 		// 视频封面
							// 		var imgSrc = JSON.parse(res.data)[0].atta.fFilepath
							// 		var src;
							// 		if (imgSrc.indexOf("mp4") != -1 && imgSrc.indexOf("C:") != -
							// 			1) {
							// 			imgSrc = imgSrc.replace(/C:/, "http://1.14.19.236:8001/")
							// 			src = imgSrc.replace(/mp4/, "jpg")
							// 		} else {
							// 			src =
							// 				"https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E8%A7%86%E9%A2%91%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=43&spn=0&di=119790&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=3346960024%2C2036034045&os=4174661132%2C668644710&simid=0%2C0&adpicid=0&lpn=0&ln=1485&fr=&fmq=1626946136579_R&fm=result&ic=&s=undefined&hd=&latest=&copyright=&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fpic.vjshi.com%2F2017-02-23%2F812ed99eb35888901ff0e220bb05120c%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark%26refer%3Dhttp%3A%2F%2Fpic.vjshi.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1629538162%26t%3Df3acdf9335d81ccd4fbc9cdc305d8dc3&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Be3fit_z%26e3Bv54AzdH3FowpviAzdH3Fl00cam_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined"
							// 		}
							// 		uni.hideLoading()
							// 		let imgitem = {};
							// 		imgitem.type = 'video';
							// 		imgitem.id = JSON.parse(res.data)[0].atta.fId
							// 		imgitem.src = src;
							// 		imgitem.filePath = videoSrc;
							// 		imgitem.needload = false;
							// 		_this.fastImgLists.push(imgitem);
							// 		if (_this.fastImgLists.length >= maxNum) {
							// 			_this.canAdd = false;
							// 		}
							// 	},
							// 	fail(res) {}
							// })

							// uploadTask.onProgressUpdate(function(res) {
							// 	_this.pgList = res.progress;
							// 	setTimeout(() => {
							// 		_this.progress = false
							// 	}, 1500)

							// });
						},
						fail: (err) => {
							that._err(err)
							// #ifdef MP
							uni.getSetting({
								success: (res) => {
									let authStatus = false;
									switch (this.videosourceTypeIndex) {
										case 0:
											authStatus = res.authSetting['scope.camera'];
											break;
										case 1:
											authStatus = res.authSetting['scope.album'];
											break;
										case 2:
											authStatus = res.authSetting['scope.album'] && res
												.authSetting['scope.camera'];
											break;
										default:
											break;
									}
									if (!authStatus) {
										uni.showModal({
											title: '授权失败',
											content: 'Hello uni-app需要从您的相机或相册获取视频，请在设置界面打开相关权限',
											success: (res) => {
												if (res.confirm) {
													uni.openSetting()
												}
											}
										})
									}
								}
							})
							// #endif
						}
					});
				}
			 else {
				// _cpImg(that.src)
			}
		},
		// 压缩图片
		_cpImg() {
			let that = this,
				resPath = _cgFile[_index];
				
			// #ifdef APP-PLUS
			// uni.hideLoading();
			// #endif
			uni.showLoading({
				title: `图片压缩中...`,
				mask: true
			});
			// 获取图片信息
			// #ifndef H5
			uni.getImageInfo({
				src: resPath,
				success: function(image) {
					// 如果图片的大小大于设定值才压缩
					uni.getFileInfo({
						filePath: resPath,
						success: function(res) {
							_cpimg(image, res.size)
						},
						fail: function(e) {
							that._err(e)
						}
					})
				},
				fail: function(e) {
					that._err(e)
				}
			});
			// #endif
			// #ifdef H5
			that._getH5ImageInfo(resPath, d => {
				_cpimg(d, d.size)
			})
			// #endif 
			// 处理图片
			function _cpimg(image, size) {
				// #ifndef APP-PLUS
				// if (image.type.indexOf('png') >= 0) {
				// 	that._result(resPath)
				// 	return false
				// }
				// #endif
				let oW = image.width,
					oH = image.height,
					scaleWidth = 1,
					scaleHeight = 1,
					ctxWidth, ctxHeight;
				if (size / 1024 >= that.size || image.width >= that.maxWidth) {
					// 控制上传图片的宽高
					if (image.width >= image.height && image.width >= that.maxWidth) {
						image.height = that.maxWidth * image.height / image.width;
						image.width = that.maxWidth;
					} else if (image.width < image.height && image.height >= that.maxWidth) {
						image.width = that.maxWidth * image.width / image.height;
						image.height = that.maxWidth;
					}
					scaleWidth = image.width / oW
					scaleHeight = image.height / oH
				}
				ctxWidth = oW * scaleWidth
				ctxHeight = oH * scaleHeight
				const ctx = uni.createCanvasContext('_myCanvas', that);
				that.cWidth = image.width;
				that.cHeight = image.height;
				// 图片旋转修正，只有H5有效
				if (that.fixOrientation) {
					// 旋转图片
					let ot = image.orientation
					if ([5, 6, 7, 8, 'right', 'left', 'right-mirrored', 'left-mirrored'].indexOf(ot) > -1) {
						that.cWidth = image.height;
						that.cHeight = image.width;
					}
					// 代码参考 https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin
					if (ot == 2 || ot == "up-mirrored") {
						ctx.translate(ctxWidth, 0);
						ctx.scale(-1, 1);
					} else if (ot == 3 || ot == "down") {
						ctx.translate(ctxWidth, ctxHeight);
						ctx.rotate(Math.PI);
					} else if (ot == 4 || ot == "down-mirrored") {
						ctx.translate(0, ctxHeight);
						ctx.scale(1, -1);
					} else if (ot == 5 || ot == "right-mirrored") {
						ctx.rotate(0.5 * Math.PI);
						ctx.scale(1, -1);
					} else if (ot == 6 || ot == "right") {
						ctx.rotate(0.5 * Math.PI);
						ctx.translate(0, -ctxHeight);
					} else if (ot == 7 || ot == "left-mirrored") {
						ctx.rotate(0.5 * Math.PI);
						ctx.translate(ctxWidth, -ctxHeight);
						ctx.scale(-1, 1);
					} else if (ot == 8 || ot == "left") {
						ctx.rotate(-0.5 * Math.PI);
						ctx.translate(-ctxWidth, 0);
					} else {
						ctx.translate(0, 0);
					}
				}
				let ctxTime = 0;
				// #ifndef H5
				ctxTime = 10;
				// #endif
				// #ifdef H5
				ctxTime = cTime();
				// #endif
				setTimeout(() => {
					ctx.drawImage(resPath, 0, 0, ctxWidth, ctxHeight)
					ctx.draw(false, () => {
						let time = 5;
						// #ifndef MP
						time = 10;
						// #endif
						// #ifdef MP
						time = cTime();
						// #endif
						setTimeout(() => {
							uni.canvasToTempFilePath({
								width: Number(that.cWidth),
								height: Number(that.cHeight),
								destWidth: Number(that.cWidth),
								destHeight: Number(that.cHeight),
								canvasId: '_myCanvas',
								fileType: 'jpg',
								quality: Number(that.ql),
								success: function(res) {
									if (that.type == 'base64') {
										let img = '';
										//#ifdef MP
										img = 'data:image/jpeg;base64,' + wx
											.getFileSystemManager().readFileSync(
												res.tempFilePath, "base64")
										that._result(img)
										//#endif
										//#ifdef APP-PLUS
										
										plus.io.resolveLocalFileSystemURL(res
											.tempFilePath,
											function(entry) {
												entry.file(function(file) {
													let fileReader =
														new plus.io
														.FileReader();
													fileReader
														.readAsDataURL(
															file);
													fileReader
														.onloadend =
														function(evt) {
															if (evt
																.target
																.readyState ==
																2) {
																that._result(
																	evt
																	.target
																	.result
																)
															} else {
																that._err(
																	evt
																)
															}
														}
												});
											},
											function(e) {
												that._err(e)
											});
										//#endif
										//#ifdef H5
										that._result(res.tempFilePath)
										//#endif
									} else {
										that._result(res.tempFilePath)
									}
								},
								fail: function(e) {
									that._err(e)
								}
							}, that)
						}, time);
					});
				}, ctxTime);

				function cTime() {
					let time = that.maxWidth / 5
					if (time >= 600) {
						return 600
					} else if (time <= 100) {
						return 100
					} else {
						return time
					}
				}
			}
		},
		// ios翻转图片
		_reverseImgData(res) {
			let w = res.width
			let h = res.height
			let con = 0
			for (let i = 0; i < h / 2; i++) {
				for (let j = 0; j < w * 4; j++) {
					con = res.data[i * w * 4 + j]
					res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
					res.data[(h - i - 1) * w * 4 + j] = con
				}
			}
			return res
		},
		_getH5ImageInfo(url, callback) {
			let image = new Image()
			image.src = url
			image.onload = function(d) {
				let imgSelf = this
				let http = new XMLHttpRequest();
				http.open("GET", url, true);
				http.responseType = "blob";
				http.onload = function(e) {
					let httpSelf = this
					if (httpSelf.status == 200 || httpSelf.status === 0) {
						let reader = new FileReader();
						reader.onload = function(e) {
							// 代码参考 https://www.jianshu.com/p/eb855b580780
							let view = new DataView(this.result);
							if (view.getUint16(0, false) != 0xFFD8) return callback({
								size: httpSelf.response.size,
								type: httpSelf.response.type,
								width: imgSelf.width,
								height: imgSelf.height,
								orientation: -1
							});
							let length = view.byteLength,
								offset = 2;
							while (offset < length) {
								let marker = view.getUint16(offset, false);
								offset += 2;
								if (marker == 0xFFE1) {
									if (view.getUint32(offset += 2, false) != 0x45786966) return callback({
										size: httpSelf.response.size,
										type: httpSelf.response.type,
										width: imgSelf.width,
										height: imgSelf.height,
										orientation: -1
									});
									let little = view.getUint16(offset += 6, false) == 0x4949;
									offset += view.getUint32(offset + 4, little);
									let tags = view.getUint16(offset, little);
									offset += 2;
									for (let i = 0; i < tags; i++)
										if (view.getUint16(offset + (i * 12), little) == 0x0112)
											return callback({
												size: httpSelf.response.size,
												type: httpSelf.response.type,
												width: imgSelf.width,
												height: imgSelf.height,
												orientation: view.getUint16(offset + (i * 12) + 8,
													little)
											});
								} else if ((marker & 0xFF00) != 0xFF00) break;
								else offset += view.getUint16(offset, false);
							}
							return callback({
								size: httpSelf.response.size,
								type: httpSelf.response.type,
								width: imgSelf.width,
								height: imgSelf.height,
								orientation: -1
							});
						};
						reader.readAsArrayBuffer(httpSelf.response);
					}
				};
				http.send();
			}
		},
		// 返回图片数据
		_result(src, index) {
			_rtArr.push(src)
			
			_index = _index + 1;
			
			
			uni.hideLoading();
			this.$emit("result", _rtArr);
			// if (_cgFile.length - 1 >= _index) {
			// 	this._cpImg()
			// } else {
			// 	uni.hideLoading();
			// 	this.$emit("result", _rtArr);
			// }
		},
		_err(src) {
			// uni.hideLoading();
			this.$emit("err", src);
		}
	}
	}
</script>

<style>
	._cpimg {
		position: fixed;
		top: -99999px;
		left: -99999px;
		z-index: -99999;
	}
</style>
